'use strict';
//参数一：speed//轮播速度,单位秒【s】；
//参数二：is_loop//是否轮询,0--不轮询，1--轮询；
//参数三：start_index//指定开始轮播图下标；
//参数四：direction//轮播方向，正向或反向0--正向，1--反向，
//参数五：is_create_pointer//是否生成图片圆点，0--不生成，1--生成；
//参数六：auto//自动轮播
//参数七：buttom//上一页，下一页按钮父元素的id
//列出组件用的id和类名，说明对应参数的意义。
//向外暴露函数，控制焦点事件。handleCarouselFocus
//speed,is_loop,start_index,direction,indicator //指示器

(function() {
    function swiperWidget(id, obj) {
        //设置默认样式
        var defaults = {
            speed: obj.speed || 5,
            is_loop: obj.is_loop || 0,
            start_index: obj.start_index || 0,
            direction: obj.direction || 0,
            indicator: obj.indicator || 0,
            auto: obj.auto || false,
            buttom: obj.buttom || "",
            row: obj.row || 1,
            col: obj.col || 1,
            handleFocus: obj.handleFocus || function() {},
            handleFocusout: obj.handleFocusout || function() {},
            handleClick: obj.handleClick || function() {}
        };

        var body = document.getElementsByTagName('body')[0], //获取body元素
            container = document.getElementById(id), //获取轮播图容器
            focus_img = container.children, //获取容器内标签
            indicator = document.getElementById('indicator'); //获取指示器
            console.log(container.children[0]);
        var imgWidth = container.children[0].offsetWidth, //获取容器的自身宽度，也就是图片宽度
            swiper_timer = '', //设置定时器id值
            spot_num = defaults.start_index, //设置下方圆点索引
            pic = defaults.start_index, //设置图片轮播索引
            target, //滑动距离（目标至）
            speed = (defaults.speed) * 1000, //设置轮播速度（单位s）
            roll_num = 0, //判断图片滑动张数
            page = 1; //图片当前页数

        //根据图片数量动态生成圆点indicator
        if (defaults.indicator == 1) {
            for (var i = 0; i < focus_img.length; i++) {
                var indicator_img = document.createElement('img');
                indicator_img.src = "/templates/images/carousel.png";
                //设置 div 属性，如 id
                indicator_img.setAttribute("id", "swiperimg__" + i);
                var imgs = indicator.appendChild(indicator_img);
                imgs.style.position = "absolute";
                imgs.style.left = i*25 + "px"
            }
            var numb = (imgWidth - (25*(focus_img.length - 1) + 11))/2;
            indicator.style.left = numb +"px";
            var indicator_imgs = indicator.children;
            indicator_imgs[defaults.start_index].src = "/templates/images/carousel_fcous.png";
            indicator_imgs[defaults.start_index].setAttribute("class", "swiperimg_fcous");
        }

        //初始化轮播图片位置  (从0开始)
        (Math.abs(parseInt(defaults.start_index)) < focus_img.length) ? (container.style.left = -(defaults.start_index * imgWidth) + 'px') : (container.style.left = 0 + 'px');

        //轮播图片,如果轮播则给图片设置焦点，如果不自动轮播则使用上下页切换
        if (defaults.auto) {
            rollImg(speed, defaults.direction);
            //给轮播图片设置焦点
           // addAreaImg();
        } else {
            addAreaSlides();
            document.getElementById(defaults.buttom).children[1].innerHTML = page + "/" + focus_img.length;
        }
        //封装缓动动画
        function animate(obj, target) {
            clearInterval(obj.swiper_timer);
            obj.swiper_timer = setInterval(function() {
                var leader = obj.offsetLeft;
                var step = 30;
                step = target > leader ? step : -step;
                if (Math.abs(target - leader) >= Math.abs(step)) {
                    leader += step;
                    obj.style.left = leader + "px";
                } else {
                    obj.style.left = target + "px"; //手动放到终点
                    clearInterval(obj.swiper_timer);
                }
            }, 15);
        }
        //向上翻页
        function animateLeft(obj, target) {
            clearInterval(obj.swiper_timer);
            obj.swiper_timer = setInterval(function() {
                var leader = obj.offsetLeft;
                var step = 30;
                step = target > leader ? step : -step;
                if (Math.abs(target - leader) >= Math.abs(step)) {
                    leader += step;
                    obj.style.left = leader + "px";
                } else {
                    obj.style.left = target + "px"; //手动放到终点
                    clearInterval(obj.swiper_timer);
                }
            }, 15);
        }
        //封装轮播 参数：播放速度，方向
        function rollImg(speed, direction) {
            clearInterval(obj.swiper_timer);
            swiper_timer = setInterval(function() {
                roll_num++; //滑动图片次数
                if (defaults.is_loop == 0 && roll_num == focus_img.length - 2) {
                    clearInterval(swiper_timer);
                }
                switch (direction) {
                    case 0:
                        key_right();
                        break;
                    case 1:
                        key_left();
                        break;
                }
                target = -pic * imgWidth;
                //图片切换
                animate(container, target);
                //焦点随轮播图变动
                var focus_idx = pic;
                if (focus_idx == focus_img.length) {
                    focus_idx = 0;
                }
                var ids = document.getElementById(id).children;
                var roll_fcous = 0;
                for (var i = 0; i < ids.length; i++) {
                    if (ids[i].getAttribute("class") == " focused-item") {
                        roll_fcous++;
                    }
                }
                if (roll_fcous) {
                    ef.set_focus(id, focus_idx);
                }
                //判断 指示器是否存在
                if (defaults.indicator == 1) {
                    spot_num = pic;
                    if (pic == indicator_imgs.length) {
                        spot_num = 0;
                    }
                    for (var i = 0; i < indicator_imgs.length; i++) {
                        indicator_imgs[i].src = "/templates/images/carousel.png";
                        indicator_imgs[i].setAttribute("class", "")
                    }
                    indicator_imgs[spot_num].src = "/templates/images/carousel_fcous.png";
                    indicator_imgs[spot_num].setAttribute("class", "swiperimg_fcous")
                }
            }, speed);
        }

        function flipOver(ele, idx, dir) {
            clearInterval(swiper_timer);
            if (dir == "left" && idx != defaults.col-1) {
                key_left();
                target = -pic * imgWidth;
                //图片切换
                animate(container, target);
            } else if (dir == "right") {
                key_right();
                target = -pic * imgWidth;
                //图片切换
                animateLeft(container, target);
            }
            if (defaults.indicator == 1) {
                spot_num = pic;
                if (pic == indicator_imgs.length) {
                    spot_num = 0;
                }
                for (var i = 0; i < indicator_imgs.length; i++) {
                    indicator_imgs[i].src = "/templates/images/carousel.png";
                    indicator_imgs[i].setAttribute("class", "")
                }
                indicator_imgs[spot_num].src = "/templates/images/carousel_fcous.png";
                indicator_imgs[spot_num].setAttribute("class", "swiperimg_fcous")
            }
            defaults.handleFocus(ele, idx, dir)
        }

        function focusout_carousel(ele, idx, dir) {
            rollImg(speed, defaults.direction);
            defaults.handleFocusout(ele, idx, dir);
        }

        //图片向右
        function key_right() {
            if (pic == focus_img.length - 1) {
                container.style.left = 0 + "px";
                pic = 0;
                return
            }
            pic++;
        }
        //图片向左
        function key_left() {
            if (pic == 0) {
                container.style.left = -(focus_img.length - 1) * imgWidth + "px";
                pic = focus_img.length - 1;
                return
            }
            pic--;
        }

    }

    window.swiperWidget = swiperWidget;
})();
